<template>
  <div class="projectSuppliers">
    <div class="list-header">
      <div class="title">币种:人民币(元)</div>
    </div>
    <el-table
      stripe
      ref="multipleTable"
      :data="tableData"
      :highlight-current-row="true"
      @selection-change="handleSelectionChange"
      :header-cell-style="getRowClass"
      style="width: 100%"
    >
      <el-table-column align="center" prop="order" label="序号" type="index" />

      <el-table-column align="center" prop="name" label="供应商名称">
        <template slot-scope="scope">
          <a
            @click="clickName(scope.row.name)"
            style="
              font-weight: 600;
              color: #316dc3;
              border-bottom: 1px solid #316dc3;
            "
            >{{ scope.row.name }}</a
          >
        </template>
      </el-table-column>
      <el-table-column align="center" prop="count" label="联系人及电话" />
      <el-table-column align="center" prop="age" label="分包合同个数" />
      <el-table-column align="center" prop="pirce" label="类积分包金额" />
    </el-table>
    <!--  分页-->
    <div class="pagingStyle">
      <el-pagination
        :pageSize="pageSize"
        :total="total"
        :pageNumber="pageNumber"
        background
        layout="prev, pager, next"
        @current-change="currentChange"
      />
    </div>

    <el-dialog :title="name" :visible.sync="dialogTableVisible">
      <el-table :data="tableData">
        <el-table-column
          align="center"
          prop="order"
          label="序号"
          type="index"
        />
        <el-table-column align="center" prop="firstname" label="主体院" />
        <el-table-column align="center" prop="name" label="参与项目编号" />
        <el-table-column align="center" prop="datatime" label="参与项目简称" />
        <el-table-column align="center" prop="age" label="分包合同个数" />
        <el-table-column align="center" prop="pirce" label="分包合同金额" />
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import { list } from "@/api/list";
export default {
  data() {
    return {
      tableData: [],
      pageNumber: 1, //第一页
      pageSize: 5, //默认显示20条
      total: 0,
      params: {},
      name: "",
      gridData: [
        {
          courtyard: "主体院",
          projectNo: "2017011",
          projectName: "参与项目简称",
          count: 1,
          money: 1000,
        },
        {
          courtyard: "分院",
          projectNo: "2017011",
          projectName: "参与项目简称",
          count: 1,
          money: 1000,
        },
        {
          courtyard: "主体院",
          projectNo: "2017011",
          projectName: "参与项目简称",
          count: 1,
          money: 1000,
        },
        {
          courtyard: "主体院",
          projectNo: "2017011",
          projectName: "参与项目简称",
          count: 1,
          money: 1000,
        },
      ],
      dialogTableVisible: false,
    };
  },
  async mounted() {
    this.getList();
  },
  methods: {
    getList() {
      list(this.params).then((res) => {
        // let tableData= res.data.list
        this.tableData = res.data.list;
        // this.total = data.page.total;
      });
    },
    clickName(data) {
      this.dialogTableVisible = true;
      this.name = data;
    },
    currentChange(e) {
      this.pageNumber = e;
      this.initData();
    },
    searchAction() {
      if (this.form.sendStatus) {
        this.params.sendStatus = this.form.sendStatus;
      } else {
        this.$delete(this.form, "sendStatus");
      }
      this.pageNumber = 1;
      this.initData();
    },
    handleSelectionChange(val) {
      this.checkedData = [];
      val.forEach((item) => {
        this.checkedData.push(item.id);
      });
      // this.multipleSelection = val;
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        // return "background: #c1c1c1";
      } else {
        return "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.projectSuppliers {
  margin: 0 20px;
  background: #fff;
  .list-header {
    .title {
      text-align: right;
      font-size: 14px;
      line-height: 2;
      padding: 10px 0;
    }
  }
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #dddddd;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 500;
}
/deep/.el-tabs__item.is-active {
  color: #28528d;
}
/deep/.el-tabs__item.is-active {
  color: #28528d;
}
/deep/.el-tabs__item:hover {
  color: #28528d;
  cursor: pointer;
}
</style>